<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <router-link to="/child1">子路由嵌套</router-link>
    <button @click="increment">普通+</button>
    <button @click="increment1(5)">参数+</button>
    <button @click="increment2()">异步+</button>
    <h3>{{$store.state.num}}</h3>
    <router-view></router-view>
    <vue-x></vue-x>
    <h3>{{$store.getters.full}}</h3>
    <h3>{{$store.getters.full1}}</h3>
    <h3>{{$store.getters.full2}}</h3>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import VueX from "./VueX";

export default {
  name: 'Home',
  data(){
    return{
      path:"/"
    }
  },
  components: {
    HelloWorld,
    VueX
  },
  methods:{
    increment(){
      this.$store.commit("increment")
      console.log(this.$store.state.num)
    },
    increment1(num){
      // 提交方式2
      this.$store.commit({
        type: "increment1",
        num
      })
      console.log(this.$store.state.num)
    },
    increment2(){
      //异步操作使用dispatch
      this.$store.dispatch("increment2")
    }
  },
  created() {
    console.log("created")
  },
  deactivated() {
    console.log("deactivated")
  },
  activated() {
    this.$router.push(this.path)
  },
  beforeRouteLeave(to, from, next){
    //离开前保存当前url
    this.path = this.$route.path
    next()
  }
}
</script>
